<template>
  <div class="w-full px-5">
    <div class="font-bold">Hi . 今日为你推荐</div>
    <!-- 今日推荐轮播 -->
    <el-carousel class="mb-2" :interval="4000" type="card" height="200px">
      <el-carousel-item class="bg-gray-300 rounded-md" v-for="item in bannerList" :key="item" @click="goAlbum(item)">
        <div :style="`background-color:${item.titleColor}`"
          class="absolute py-0.5 px-2 rounded-tl-md rounded-br-md text-white text-sm">
          {{ item.typeTitle }}
        </div>
        <img :src="item.imageUrl" class="w-full h-full" />
      </el-carousel-item>
    </el-carousel>

    <!-- 你的私存歌单 -->
    <div class="py-3 font-bold">你的私存歌单</div>
    <banner :songList="RecSongList" title="songList" />

    <!-- 大家都在听 -->
    <div class="flex items-center py-3 font-bold">
      大家都在听
      <div class="mx-3 px-2 py-0.5 bg-gray-300 w-fit rounded-xl hover:bg-[#d1f3d1] duration-150" @click="addPlayList">
        <svg t="1727677590968" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="4038" width="22" height="22">
          <path
            d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
            fill="#040000" p-id="4039"></path>
        </svg>
      </div>
    </div>
    <gridList :list="newSongs" />

    <!-- 专辑遨游指南 -->
    <div class="mt-5 py-3 font-bold">专辑遨游指南</div>
    <banner :songList="newAlbums" title="album" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getBannerApi, getNewSongApi, getNewAlbumApi } from '../.././api/index'
import { BannerType } from '../../types'
import { storeToRefs } from 'pinia'
import { useStore } from '../../store'
import { newSongType, newAlbumType } from './type'
import { songsType } from '@renderer/store/type'

const { songListStore, playListStore, songDetailStore } = useStore()
const { RecSongList } = storeToRefs(songListStore)
const { song } = storeToRefs(songDetailStore)
const router = useRouter()
const bannerList = ref([] as BannerType['banners'])
const newSongs = ref<newSongType[]>([])
const newAlbums = ref<newAlbumType[]>([])

onMounted(() => {
  getBanner()
  getSongList()
  getNewSong()
  getNewAlbum()
})
// 获取轮播图
const getBanner = async () => {
  let res = await getBannerApi()
  bannerList.value = res.banners
}
// 获取歌单列表
const getSongList = async () => {
  await songListStore.getPersonalized()
}
// 获取最新音乐
const getNewSong = async () => {
  let res = await getNewSongApi(12)
  newSongs.value = res.result
}
//获取最新专辑
const getNewAlbum = async () => {
  let res = await getNewAlbumApi()
  newAlbums.value = res.albums
}
// 跳转专辑详情
const goAlbum = async (item: any) => {
  if (item.targetType === 3000) {
    router.push({
      path: '/detail',
      query: {
        id: item.url.split('id=')[1],
        type: 'album'
      }
    })
  } else if (item.targetType === 1) {
    // 获取歌曲详情
    await songDetailStore.getSongDetail(item.targetId)
    // 获取歌曲url
    songDetailStore.getSongUrl(item.targetId)
    // 添加歌曲到播放列表
    playListStore.addSongToPlayList(song.value)
    // 播放歌曲
  } else if (item.targetType === 10) {
    router.push({
      path: '/detail',
      query: {
        id: item.targetId,
        type: 'ablum'
      }
    })
  }

}
const addPlayList = () => {
  let palyList: songsType[] = newSongs.value.map((item) => {
    return {
      name: item.name,
      ar: item.song.artists,
      al: item.song.album,
      id: item.id,
      dt: item.song.duration,
      fee: item.song.fee,
      picUrl: item.picUrl
    }
  })
  const id = palyList[0].id
  // 默认播放歌单第一首歌曲
  songDetailStore.getSongDetail(id)
  songDetailStore.getSongUrl(id)
  playListStore.addAllSongToPlayList(palyList)

}
</script>

<style scoped>
:deep(.el-carousel__indicators) {
  position: relative;
  text-align: center;
  top: 5px;
}

:deep(.el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #4ade80;
}
</style>
